<script setup>
import {gsap} from "gsap";
import {ScrollTrigger} from "gsap/ScrollTrigger";
import {onMounted} from "vue";

gsap.registerPlugin(ScrollTrigger)
//gsap

// 每个事件动画
const eventAnimation = () => {
  document.querySelectorAll('.timeline li').forEach(function (item) {
    gsap.from(item, {
      opacity: 0, // 初始透明度为0
      y: 100, // 初始位置在当前位置下方50%
      // ease: 'none', // 动画没有缓动效果
      duration: 0.1,
      scrollTrigger: {
        trigger: item, // 触发动画的元素
        start: 'bottom bottom', // 当元素中心滚动到视口中心时开始动画
        end: 'center center', // 当元素中心滚动出视口中心时结束动画
        // markers: true, // 显示触发标记，用于调试
        scrub: true // 平滑地根据滚动位置更新动画
      }
    });
  });
}

onMounted(() => {
  eventAnimation()
})
</script>

<template>
  <ul id="experience" class="w-2/3 mx-auto timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">
    <li>
      <div class="timeline-middle">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="h-5 w-5">
          <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"/>
        </svg>
      </div>
      <div class="timeline-start mb-10 md:text-end">
        <time class="font-mono italic">2023-7</time>
        <div class="text-lg font-black">贵大CCF分会开发小组成立</div>
        贵大CCF分会的开发小组正式成立。一群充满激情与才华的开发者聚在了一起。
      </div>
      <hr/>
    </li>
    <li>
      <hr/>
      <div class="timeline-middle">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="h-5 w-5">
          <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"/>
        </svg>
      </div>
      <div class="timeline-end mb-10">
        <time class="font-mono italic">2023-11</time>
        <div class="text-lg font-black">
          <a href="http://210.40.16.126:8080/#/login" class="link" target="_blank">学分预警系统上线</a>
        </div>
        旨在解决学生学分结算问题以及教务处无法便捷修改和查看培养方案
        和学分情况的问题。系统自2023年11月起已在学院服务器上运行，并受到教学科的日常使用。
        已有2053名学生登录并使用该系统。
      </div>
      <hr/>
    </li>
    <li>
      <hr/>
      <div class="timeline-middle">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="h-5 w-5">
          <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"/>
        </svg>
      </div>
      <div class="timeline-start mb-10 md:text-end">
        <time class="font-mono italic">2023-12</time>
        <div class="text-lg font-black">贵州省2023鲲鹏应⽤创新⼤赛省二</div>
<!--        <a-image-->
<!--            :previewMask="false"-->
<!--            class="rounded-xl"-->
<!--            :width="'100%'"-->
<!--            src="/experience/2023kunpeng.jpg"-->
<!--        />-->
      </div>
      <hr/>
    </li>
    <li>
      <hr/>
      <div class="timeline-middle">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="h-5 w-5">
          <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"/>
        </svg>
      </div>
      <div class="timeline-end mb-10">
        <time class="font-mono italic">2024-3-2024-5</time>
        <div class="text-lg font-black">竞赛管理系统上线</div>
        方便学生和教学科办公室进行竞赛加分管理的系统。学生可以通过系统提交获奖证明并查看记录，教学科可以进行审核和加分处理。
      </div>
      <hr/>
    </li>
    <li>
      <hr/>
      <div class="timeline-middle">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="h-5 w-5">
          <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"/>
        </svg>
      </div>
      <div class="timeline-start mb-10">
        <time class="font-mono italic">2024-5-2024-6</time>
        <div class="text-lg font-black">计算机设计⼤赛国三 && 省三</div>
        <a-image
            :previewMask="false"
            class="rounded-xl"
            width="100%"
            src="/experience/2024jisuanjisheji.jpg"
        />
      </div>
      <hr/>
    </li>
    <li>
      <hr/>
      <div class="timeline-middle">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="h-5 w-5">
          <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"/>
        </svg>
      </div>
      <div class="timeline-start mb-10 md:text-end">
        <time class="font-mono italic">未来</time>
        <div class="text-lg font-black">
          期待你的加入
        </div>

      </div>
    </li>

  </ul>
</template>

<style scoped>

</style>